<template>
    <div class='path-index container'>
        <Header></Header>
        <section>
            <ul v-if="list.length">
                <li
                 v-for="(item,i) in list" 
                 :key="i"
                 @click="goList(item)" 
                 >
                 
                    <div>
                        <span>{{item.name}}</span>
                        <span>{{item.tel}}</span>
                    </div>
                    <div>
                        <span class='active' v-if="item.isDefault==1">[默认]</span>
                        <span>{{item.province}}</span>
                        <span>{{item.city}}</span>
                        <span>{{item.county}}</span>
                        <span>{{item.addressDetail}}</span>
                    </div>
                </li>
            </ul>
            <div v-else>暂无地址,可去添加地址</div>
            <div class='add-path' @click="goList('add')">添加地址</div>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Header from '@/components/path/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import http from '@/common/api/request'
import {mapState,mapMutations} from 'vuex'
import bus from '@/common/bus.js'
export default{
    data(){
      return {
        pathStatus:false,       //判断是不是从订单页跳转过来的
      }
    },
    components:{
        Header,
        Tabbar
    },
    computed:{
      ...mapState({
        list:state=>state.path.list
      })
    },
    methods: {
      ...mapMutations(['initData']),
      // 跳转编辑/添加地址页
      goList(option) {
        // this.pathStatus为true代表从订单页页面进入的：选择状态
        if(this.pathStatus){
          this.pathStatus=false
          bus.$emit('selectPath',JSON.stringify(option))
          this.$router.back()
          return
        }

        this.$router.push({
          name:'pathList',
          params:{
            key:JSON.stringify(option)
          }
        })
      },
      // 请求接口，获取数据
      getData(){
        http.$axios({
          url:'/api/selectAddress',
          method:'POST',
          headers:{
            token:true
          }
        }).then(res=>{
          this.initData(res.data)
        })
      }
    },
    created(){
      this.getData()
      // 从订单页进来的
      if(this.$route.query.type=='select'){
        this.pathStatus=true
      }
    },
}
</script>

<style lang='scss' scoped>
section{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F7F7F7;
    ul{
        width: 100%;
        li{
            padding:0.266666rem 0.4rem;
            margin:0.16rem 0;
            background-color: #FFFFFF;
            span{
                padding-right:0.4rem;
                font-size:0.426666rem;
            }
            .active{
                color:#b0352f;
            }
        }
    }
    .add-path{
        margin-top:0.8rem;
        width: 3.2rem;
        line-height: 1.066666rem;
        font-size:0.48rem;
        text-align: center;
        color:#FFFFFF;
        background-color: #b0352f;
        border-radius: 6px;
    }
}
::v-deep .tabbar{
    border-top:2px solid #ccc;
}
</style>
